<template>
  <div>
    <div class="top-nav">
      <div class="left">
        <ul>
          <li><a href="">Weknow</a></li>
          <li><a href="">读书</a></li>
          <li><a href="">电影</a></li>
          <li><a href="">音乐</a></li>
          <li><a href="">同城</a></li>
          <li><a href="">小组</a></li>
          <li><a href="">阅读</a></li>
          <li><a href="">FM</a></li>
          <li><a href="">时间</a></li>
          <li><a href="">豆品</a></li>
        </ul>
      </div>
      <div class="right">
        <ul>
          <li><a href="">下载Weknow客户端</a></li>
          <li><a href="">提醒</a></li>
          <li><img :src="suburl1+obj.touxiang" v-if="isimgshow">
          <span class="userinfo"  v-if="isspanshow">{{obj.email}}
          <div class="hidebox">
            <router-link :to="{path:`/cyd/self`}" class="a1">个人中心</router-link>
              <a href="" @click="outlogin" class="a2">退出登录</a>
          </div>
          </span>
          </li>
          <li><a @click="fn3" v-if="isloginshow" style="cursor: pointer">登录
              
              </a></li>
        </ul>
        <!-- <div>登录</div> -->
      </div>
    </div>
    <div class="top-nav-music">
      <a href="">Weknow音乐</a>
      <input
        type="text"
        name=""
        id=""
        placeholder="唱片名、表演者、条码、ISRC"
        class="input1"
        v-model="inputvalue"
        @input="getSearch"
        @focus="showSearch"
        @blur="hideSearch"
      />
      <input type="button" value="搜索" name="bt" @click="fn" class="input2" />
     <div class="search-box" v-show="isShowSearch" >
      <div v-for="item in showData" class="search-list"
        @mouseleave="clearSearchList" :key="item.index" >
        <p class="ppp" @click="fn1(item.title)" >{{item.title}}</p>
      </div>
      </div>


      <div class="line"></div>
      <img src="./views/img/weknow.png" alt="" />
      <ul>
        <li>我听</li>
        <li>音乐人</li>
        <li>专辑</li>
        <li>排行榜</li>
        <li>分类浏览</li>
        <li>乐评</li>
        <li>Weknow</li>
        <li>歌单</li>
        <li>2021年度榜单</li>
      </ul>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
        isimgshow:true,
        isspanshow:true,
        isloginshow:false,
      inputvalue: "",
      soureData: [],
      showData: [],
      isShowSearch:false,
       isControlShow: true,
      arr:[],
      obj:{}
    };
  },
  async mounted(){
           let res1=await this.$axios("zuire")
           this.arr=res1.data

           let res2=await this.$axios("getuserinfo")
           if(res2.data.code==4004){
               this.isloginshow=true
               this.isimgshow=false
               this.isspanshow=false
           }else if(res2.data.code==2004){
               this.isloginshow=false
                this.isimgshow=true
               this.isspanshow=true
               this.obj=res2.data

           }
           
  },
  methods: {
      fn3(){
          this.$router.push({path:`/cll/login`})
      },
      async outlogin(){
          let res=await this.$axios("outlogin")
          if(res.data.code==2001){
              localStorage.removeItem("token")
          }
      },
     async fn1(arg){
      let res=await this.$axios("keyword",{params:{keyWord:arg}})
      this.$router.push({path:`/wj/xqy`,query:{id:res.data.gid}})
      this.isShowSearch=false
      console.log(arg)
      },
      async fn(){
      let res=await this.$axios("keyword",{params:{keyWord:this.inputvalue}})
      this.$router.push({path:`/wj/xqy`,query:{id:res.data.gid}})
    //   console.log(res.data)
      },
    async getSearch() {
      let keyWord = this.inputvalue.toLowerCase();
      let arr = [];
      let res = await this.$axios("alldata");
      this.soureData = res.data;
    //   console.log(this.soureData, 2222222222);
      arr = this.soureData.filter((items) => {
        if (items.title.toLowerCase().indexOf(keyWord) !== -1) {
          return items;
        }
      });
      this.showData = arr;
    //   console.log(this.showData.length, 111111);
      this.inputvalue == '' ? this.showData=this.arr : ''
      this.showData.length == 0 ? this.isShowSearch = false : this.isShowSearch = true

    },
    showSearch(){
        if(this.inputvalue==``){
           this.isShowSearch=true
        this.showData = this.arr;
        }else {
            if(this.showData.length==0){
           this.isShowSearch=false
        }else{
           this.isShowSearch=true
        }
    }  },
      hideSearch() {
          if(this.inputvalue==``){
           this.isShowSearch = false
          }else{
           this.isShowSearch = true
          }
        // 如果这样写，下拉框里面的就不能点，如果像上面那样写，鼠标失焦后下拉框就一直存在
        // this.isShowSearch=false
        // this.showData.length == 0 ?  : ''
        // this.isControlShow ? '' : this.isShowSearch = false
      },
      

  },
};

</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}
.ppp{
    color: #555d53;
    font-size: 14px;
    margin-top: 5px;
    cursor: pointer;
    width:410px;
    height: 20px;
}
.ppp:hover{
    background-color: #f0f3ef;
}
.top-nav-music {
  width: 100%;
  position: relative;
  // height: 800px;
  // border: 1px solid black;
  
  .search-box{
    
    width: 420.2px;
    position: absolute;
    left: 390px;
    top: 48px;
    background-color: #f0f3ef;
    z-index: 100;
    // .search-list{
    // // position: absolute;

    //     z-index: 10000;
    // }
  }
  img {
    width: 250px;
    height: 100px;
    position: absolute;
    left: 970px;
    top: 10px;
  }
  .line {
    width: 100%;
    height: 0;
    border: 1px solid #e3e9e2;
    position: absolute;
    top: 70px;
  }
  a {
    color: orange;
    font-weight: bold;
    font-size: 25px;
    text-decoration: none;
    position: absolute;
    left: 189px;
    top: 20px;
  }
  .input1 {
    width: 416.2px;
    height: 28px;
    position: absolute;
    left: 390px;
    top: 20px;
  }
  .input2 {
    width: 30px;
    height: 31px;
    position: absolute;
    left: 809.2px;
    top: 20px;
  }
  ul {
    list-style: none;
    display: flex;
    position: absolute;
    left: 188px;
    width: 620px;
    // border: 1px solid black;
    justify-content: space-between;
    top: 82px;
    li {
      color: #555d53;
      font-size: 14px;
    }
  }
}
.top-nav {
  width: 100%;
  height: 28px;
  background-color: #545652;
  display: flex;
  .left {
    width: 70%;
    ul {
      display: flex;
      list-style: none;
      li {
        width: 48px;
        height: 28px;
        line-height: 28px;
        display: flex;
        justify-content: center;
      }
    }
  }
  a {
    color: #d5d5d5;
    font-size: 12px;
    text-decoration: none;
  }
  .right {
    width: 30%;
    display: flex;
    ul {
      display: flex;
      list-style: none;
       li {
        width: 48px;
        height: 28px;
        line-height: 28px;
        display: flex;
        justify-content: center;
        position: relative;
        img{
            position: absolute;
            width: 25px;
            height: 25px;
            border-radius: 50%;
        }
        span{
            display: inline-block;
            position: absolute;
            font-size: 13px;
            left: 90px;
            top:-4px
        }
      }
    }
    ul li .userinfo{
        display: inline-block;
        position: relative;
        text-align: center;
        cursor: pointer;
    }
    ul li .userinfo .hidebox{
      width: 165px;
      height: 50px;
      background-color: #f0f3ef;
      position: absolute;
      z-index: 10000;
      left: -37px;
      display: none;
      top:28px;

      .a1{
       position: absolute;
       left: 20px;
       top: 10px;
       color: blue;
      }
      .a2{
        position: absolute;
        left: 100px;
        top: 10px;
       color: blue;

      }
    }
    ul li .userinfo:hover .hidebox{
        display: block;
    }
  }
}
.top-nav-music {
  width: 100%;
  height: 115px;
  background-color: #f0f3ef;
}
</style>